import React, { Component } from 'react'
import { NavBar, Icon, Tabs, Toast } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput"
import "./GoodList.css";
import myaxios from "../../utils/myaxios";
import emptyProduct from "../../assets/images/empty_product.jpg"
export default class GoodList extends Component {
    constructor(props) {
        super(props);
        this.pagenum = 1;
        this.pagesize = 10;
        this.goodListRef = React.createRef();
    }
    state = {
        tabs: [{ title: '综合', sub: '1' },
        { title: '销量', sub: '2' },
        { title: '价格', sub: '3' },],
        goods: []
    }
    componentDidMount() {
        console.log(this.props);
        let params_arr = this.props.location.search.split("?")[1].split("=") || "";
        console.log(params_arr);
        if (params_arr[0] === "cid") {
            this.cid = params_arr[1]
        } else if (params_arr[0] === "query") {
            this.query = params_arr[1]
        }
        this.getProductList();

        console.log(this.goodListRef);
        //注册监听事件
        this.goodListRef.current.parentElement.addEventListener("scroll",this.handleScroll)
    }
    componentWillUnmount(){
        //卸载监听事件
        this.goodListRef.current.parentElement.removeEventListener("scroll",this.handleScroll);
    }
    handleScroll = () => {
        let parentElement = this.goodListRef.current.parentElement;
        //客户端的高度 clientHeight
        let clientHeight = parentElement.clientHeight;
        // console.log("客户端的高度:"+clientHeight);
        //列表的高度
        let scrollHeight = parentElement.scrollHeight;
        // console.log("列表的高度:"+scrollHeight);
        //列表已经滚动的高度
        let scrollTop = parentElement.scrollTop;
        // console.log("列表已经滚动的高度:"+scrollTop);
        // console.log(scrollHeight-clientHeight-scrollTop);
        if(scrollHeight-clientHeight-scrollTop <= 1){
            console.log("我到底了");
            this.getProductList();
        }
    }
    
    getProductList = () => {
        let params = {};
        if (this.cid) {
            params["cid"] = this.cid;
        }
        if (this.query) {
            params["query"] = decodeURIComponent(this.query);
        }
        
        //如果页码存在
        if (this.total) {
            params["pagenum"] = ++this.pagenum;
        } else {
            params["pagenum"] = this.pagenum;
        }
        //默认请求多少个数据
        params["pagesize"] = this.pagesize;
        //如果当前页面的页码大于总的页面
        if (this.pagenum > Math.ceil(this.total / this.pagesize)) {
            Toast.info("已经是最后一条数据了", 1);
        } else {
            myaxios.get("goods/search", { params }).then((res) => {
                this.total = res.total;
                this.pagenum = res.pagenum;
                this.setState({
                    goods: [...this.state.goods, ...res.goods]
                })
            }).catch((err) => {
                console.log(err);
            })
        }
    }
    handleitemClick =(id) => {
        this.props.history.push("goodDetail/" +id);
    }
    
    render() {
        return (

            <div className="yg-gl">
                <div className="yg-gl-nav">
                    <NavBar
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >商品列表</NavBar>
                </div>
                {/* 商品列表搜索框的开始 */}
                <div className="yg-gl-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 商品列表搜索框的结束 */}
                {/* 商品列表Tab切换的开始 */}
                <div className="yg-gl-tab">
                    <Tabs tabs={this.state.tabs}
                        onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                        tabBarUnderlineStyle={{ borderColor: "red" }}
                    >
                        <div className="gl-tab-zh" ref={this.goodListRef}>
                            {this.state.goods.map((v, index) => {
                                return (
                                    <div className="tab-zh-item" key={v.goods_id} onClick={this.handleitemClick.bind(this,v.goods_id)}>
                                        <div className="zh-item-left">
                                            <img src={v.goods_small_logo ? v.goods_small_logo : emptyProduct} alt="" />
                                        </div>
                                        <div className="zh-item-right">
                                            <div className="item-right-top">{v.goods_name}</div>
                                            <div className="item-right-bottom">
                                                ￥{v.goods_price}
                                            </div>
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                height: "150px",
                                backgroundColor: "#fff",
                            }}
                        >
                            销量
            </div>
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                height: "150px",
                                backgroundColor: "#fff",
                            }}
                        >
                            价格
            </div>

                    </Tabs>

                </div>
                {/* 商品列表Tab切换的结束 */}
            </div>

        )
    }
}
